<template>
  <div>
    <!--搜索区域-->
    <a-form layout="inline" :form="form" @submit="handleSubmit">
      <a-form-item>
        <a-input v-model="queryVo.name" placeholder="请输入资源名称 ">
        </a-input>
      </a-form-item>

      <a-form-item>
        <a-input v-model="queryVo.author" placeholder="请输入上传用户 ">
        </a-input>
      </a-form-item>

      <a-form-item
          :style="{ display: 'inline-block'}"
      >
        开始时间：
        <a-date-picker v-model="queryVo.start" style="width: 60%"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">
          搜索
        </a-button>
      </a-form-item>
      <a-form-item
          :style="{marginRight:'10px'}"
      >
        <a-button type="primary" @click="showModal">
          添加资源
        </a-button>
      </a-form-item>
    </a-form>
    <!--表格区域-->
    <a-table :columns="userColumns" :data-source="data" bordered :pagination="pagination">
      <span slot="status" slot-scope="text,record">
       <a-switch :default-checked="record.status" @change="onChange(record.id)"/>
      </span>
      <span slot="cover" @click="getId(record.id)" slot-scope="text,record">
        <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            :customRequest="selfUpload"
        >
          <img v-if="record.cover" :src="record.cover" alt="cover" class="avatar-size"/>
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'"/>
            <div class="ant-upload-text">
              Upload
            </div>
          </div>
        </a-upload>
      </span>
      <span slot="createTime" slot-scope="createTime">
        {{ createTime }}
      </span>
      <span slot="action" slot-scope="text, record">
      <a-divider type="vertical"/>
      <a @click="deleteById(record.id)">删除</a>
      <a-divider type="vertical"/>
      <a-dropdown :trigger="['click']">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          更多<a-icon type="down"/>
        </a>
        <a-menu slot="overlay">
          <a-menu-item key="0" sl>
            <a @click="updateRoleInfo(record)">修改信息</a>
          </a-menu-item>
          <a-menu-divider/>
        </a-menu>
      </a-dropdown>
    </span>
    </a-table>


    <!--添加资源-->
    <div>
      <a-modal
          title="上传资源"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
      >
        <a-form-model :model="addBookVo.name" v-bind="layout">
          <a-form-model-item has-feedback label="资源名称" prop="code">
            <a-input v-model="addBookVo.name" type="text" autocomplete="off"/>
          </a-form-model-item>
        </a-form-model>
        <a-form-model :model="addBookVo.link" v-bind="layout">
          <a-form-model-item has-feedback label="资源链接" prop="code">
            <a-input v-model="addBookVo.link" type="text" autocomplete="off"/>
          </a-form-model-item>
        </a-form-model>
        <a-form-model :model="addBookVo.description" v-bind="layout">
          <a-form-model-item has-feedback label="资源描述" prop="description">
            <a-textarea placeholder="资源描述.." v-model="addBookVo.description" :rows="4"/>
          </a-form-model-item>
        </a-form-model>
        <a-form-model :model="addBookVo.cateId" v-bind="layout">
          <a-form-model-item has-feedback label="资源归属" prop="description">
            <a-select v-model="addBookVo.cateId" default-value="请选择" style="width: 120px">
              <a-select-option v-for="item in cates" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>

    <!--修改资源-->
    <div>
      <a-modal
          title="上传资源"
          :visible="updateState"
          :confirm-loading="confirmLoading"
          @ok="updateOK"
          @cancel="updateFail"
      >
        <a-form-model :model="updateBookVo.name" v-bind="layout">
          <a-form-model-item has-feedback label="资源名称" prop="code">
            <a-input v-model="updateBookVo.name" type="text" autocomplete="off"/>
          </a-form-model-item>
        </a-form-model>
        <a-form-model :model="updateBookVo.link" v-bind="layout">
          <a-form-model-item has-feedback label="资源链接" prop="code">
            <a-input v-model="updateBookVo.link" type="text" autocomplete="off"/>
          </a-form-model-item>
        </a-form-model>
        <a-form-model :model="updateBookVo.description" v-bind="layout">
          <a-form-model-item has-feedback label="资源描述" prop="description">
            <a-textarea placeholder="资源描述.." v-model="updateBookVo.description" :rows="4"/>
          </a-form-model-item>
        </a-form-model>
        <a-form-model :model="updateBookVo.cateId" v-bind="layout">
          <a-form-model-item has-feedback label="资源归属" prop="description">
            <a-select v-model="updateBookVo.cateId" default-value="请选择" style="width: 120px">
              <a-select-option v-for="(item,index) in cates" :key="index" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import {
  addBook,
  deleteBookById,
  getBookById,
  getBooks,
  updateBookInfo,
  updateBookState,
  uploadCover
} from "../../../services/books";
import {getCates} from "../../../services/cates";

const userColumns = [
  {
    title: '资源名',
    dataIndex: 'name',
    key: 'name',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '资源封面',
    dataIndex: 'cover',
    key: 'cover',
    scopedSlots: {customRender: 'cover'},
  },
  {
    title: '上传用户',
    dataIndex: 'author',
    key: 'author',
  },
  {
    title: '资源描述',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: '资源状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: {customRender: 'status'},
  },
  {
    title: '归属',
    dataIndex: 'cateName',
    key: 'cateName',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  }
]
const data = []
export default {
  name: "Books",
  data() {
    return {
      userColumns,
      data,
      queryVo: {
        name: '',
        author: '',
        start: '',
        end: ''
      },
      cateVo: {
        id: '',
        name: ''
      },
      cates: [],
      addBookVo: {
        name: '',
        link: '',
        description: '',
        cateId: '',
      },
      updateBookVo:{
        id:'',
        name:'',
        link:'',
        description: '',
        cateId: ''
      },
      bookId:'',
      visible: false,
      confirmLoading: false,
      updateState:false
    }
  },
  created() {
    this.getAllBooks()
  },
  methods: {
    getAllBooks() {
      getBooks(this.queryVo.name, this.queryVo.author, this.queryVo.start, this.queryVo.end).then(result => {
        this.data = result.data.data.books
      })
    },
    handleSubmit() {
      this.getAllBooks()
    },
    showModal() {
      this.visible = true
      this.getAllCate()
    },
    handleOk(file) {
      const forData = new FormData()
      forData.append('file', file)
      addBook(this.addBookVo.name, this.addBookVo.link, this.addBookVo.description, this.addBookVo.cateId).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg, 3)
          this.visible = false
          this.getAllBooks()
        } else {
          this.$message.error(res.data.msg, 3)
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    getAllCate() {
      getCates().then(result => {
        this.cates = result.data.data
      })
    },

    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('你需要上传的文件格式为（jpeg/png）!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图片不得大于2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    getId(id){
      this.bookId = id
    },
    selfUpload(data) {
      const formData = new FormData()
      formData.append('file',data.file)
      uploadCover(this.bookId,formData).then(res=>{
        if (res.data.code === 0){
          this.$message.success(res.data.msg,3)
          location.reload()
        }else {
          this.$message.error(res.data.msg,3)
        }
      })
    },
    onChange(id){
      updateBookState(id).then(result=>{
        if (result.data.code === 0){
          this.$message.success(result.data.msg,3)
          this.getAllBooks()
        }else {
          this.$message.error(result.data.msg,3)
        }
      })
    },
    deleteById(id){
      deleteBookById(id).then(result=>{
        if (result.data.code === 0){
          this.$message.success(result.data.msg,3)
          this.getAllBooks()
        }else {
          this.$message.error(result.data.msg,3)
        }
      })
    },
    updateRoleInfo(record){
      this.getAllCate()
      getBookById(record.id).then(result=>{
        this.updateBookVo.id = result.data.data.id
        this.updateBookVo.name = result.data.data.name
        this.updateBookVo.link = result.data.data.link
        this.updateBookVo.description = result.data.data.description
        this.updateBookVo.cateId = result.data.data.cateId
      })
      this.updateState = true
    },
    updateOK(){
      updateBookInfo(this.updateBookVo.id,this.updateBookVo.name,this.updateBookVo.link,this.updateBookVo.description,this.updateBookVo.cateId).then(result=>{
        if (result.data.code === 0){
          this.$message.success(result.data.msg,3)
          this.getAllBooks()
          this.updateState = false
        }else {
          this.$message.error(result.data.msg,3)
        }
      })
    },
    updateFail(){
      this.updateState = false
    }
  }
}
</script>

<style scoped>
.avatar-size {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
